<template>
	<div>
		<div class="box">
			<div class="title">
				<span class="tag"></span>
				其他费用
				<span class="price">合计：￥{{ format_thousand(price) }}</span>
			</div>
			<div class="">
				<el-form
					:model="formData"
					ref="form"
					:inline="false"
					label-width="5px"
					size="normal"
					:hide-required-asterisk="true">
					<el-table
						ref="multipleTable"
						:data="formData.feeList"
						tooltip-effect="dark"
						style="width: 100%"
						:header-cell-class-name="setHeaderCellName">
						<el-table-column
							label="操作"
							width="100"
							align="center"
							v-if="state == 'write'">
							<template slot-scope="scope">
								<div>
									<el-button
										type="text"
										@click="
											remove(
												scope.$index,
												scope.row,
												formData.feeList,
											)
										">
										删除
									</el-button>
								</div>
							</template>
						</el-table-column>
						<TableCloumn
							v-for="item in tableCloumns"
							:cellOptions="item"
							:state="state"
							dataName="feeList"></TableCloumn>
					</el-table>
				</el-form>

				<div
					class="btn"
					@click="add(formData.feeList)"
					v-if="state !== 'readonly' && state !== 'disabled'">
					<i class="el-icon-plus"></i>
					<span>增加一行</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import FormItems from '@/views/finance/manage/formItems/index.vue';
	import TableCloumn from '@/views/finance/manage/tableColumn/index.vue';
	export default {
		components: { FormItems, TableCloumn },
		props: {
			value: {
				required: false,
			},
			state: {
				required: false,
			},
			type: {
				required: false,
			},
		},
		dicts: ['quota_fee'],
		data() {
			return {
				quotaFeeList: [],
			};
		},
		watch: {
			'dict.type.quota_fee': {
				handler(val) {
					if (this.notEmpty(val)) {
						this.quotaFeeList = this._.cloneDeep(val);
						this.setDisabled();
					}
				},
				deep: true,
				immediate: true,
			},
			price: {
				handler(val) {
					this.formData.otherFeeAmount = val;
				},
				immediate: true,
			},
		},
		computed: {
			formData: {
				get() {
					return this.value;
					return this.useVModel.call(this);
				},
				set(val) {
					this.$emit('input', val);
				},
			},
			price() {
				let money = 0;
				this.formData?.feeList?.map?.(item => {
					if (item.feeCount && item.feeAmount) {
						let itemMoney = this.numberRide(
							item.feeCount * 1,
							item.feeAmount,
						);
						if (Number.isFinite(itemMoney)) {
							money = this.numberAdd(money, itemMoney);
						}
					}
				});
				return money;
			},
			tableCloumns() {
				return [
					{
						label: '费用项',
						prop: 'feeKey',
						type: 'select',
						selectList: this.quotaFeeList,
						rules: true,
						prototype: {
							allowCreate: true,
						},
						event: {
							type: 'change',
							cb: row => {
								let e = this.quotaFeeList.find(
									e => e.value == row.feeKey,
								);
								if (e) {
									row.feeVal = e.label;
								} else {
									row.feeVal = row.feeKey;
								}
								this.setDisabled();
							},
						},
					},
					{
						label: '次数',
						prop: 'feeCount',
						type: 'input_number',
						prototype: {
							min: 1,
							stepStrictly: true,
						},
						rules: true,
					},
					{
						label: '费用金额',
						prop: 'feeAmount',
						type: 'input_number',
						min: 1,
						tag: 'price',
						prototype: {
							step: 0.01,
							stepStrictly: true,
						},
						rules: true,
					},
					{
						label: '备注',
						prop: 'remark',
						type: 'textarea',
						width: '200px',
						minRows: 1,
						maxRows: 1,
					},
				];
			},
		},
		created() {
			this.setDisabled();
		},
		mounted() {
			this.$emitter.on('setDisabledOther', this.setDisabled);
		},
		methods: {
			valid() {
				return new Promise(async resolve => {
					let result = true;
					let refs = Object.values(this.$refs);
					for (let index = 0; index < refs?.length; index++) {
						const ref = refs[index];
						if (
							Object.prototype.toString.call(ref) ==
							'[object Array]'
						) {
							for (let i = 0; i < ref.length; i++) {
								const element = ref[i];
								if (element?.valid) {
									let rc = await element?.valid?.();
									result = result && rc;
								}
								if (element?.validate) {
									let rf = await this._valid(ref);
									result = result && rf;
								}
								if (element?.form_validate) {
									let rf = await this._valid(
										ref,
										'form_validate',
									);
									result = result && rf;
								}
							}
						} else {
							if (ref?.valid) {
								let rc = await ref?.valid?.();
								result = result && rc;
							}
							if (ref?.validate) {
								let rf = await this._valid(ref);
								result = result && rf;
							}
							if (ref?.form_validate) {
								let rf = await this._valid(
									ref,
									'form_validate',
								);
								result = result && rf;
							}
						}
					}

					resolve(result);
				});
			},
			remove(index, row, list) {
				let label = this.quotaFeeList.find(
					item => item.value == row.feeKey,
				)?.label;
				this.$confirm(
					`此操作将删除 ${
						label ? label + ' 费用项' : '该费用项'
					}, 是否继续?`,
					'提示',
					{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					},
				)
					.then(() => {
						list.splice(index, 1);
						this.setDisabled();
					})
					.catch(() => {});
			},
			add(list) {
				list.push({});
			},
			setDisabled(row) {
				this.$nextTick(() => {
					this.quotaFeeList?.map((item, i) => {
						this.$set(item, 'disabled', false);
						let child = this.formData.feeList.find(e => {
							return e.feeKey == item.value;
						});
						if (child && child.feeVal !== '其他') {
							this.$set(item, 'disabled', true);
						}
					});
				});
			},
			setHeaderCellName({ row, column, rowIndex, columnIndex }) {
				if (this.state == 'readonly') {
					return '';
				}
				if (
					columnIndex !== 0 &&
					columnIndex !== 4 &&
					columnIndex !== undefined
				) {
					return 'ruleHeaderCell';
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		border-radius: 8px;
		background-color: #fff;
		.title {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 22px;
			padding-bottom: 15px;
			// border-bottom: 1px solid #e9e9e9;
			display: flex;
			align-items: center;
			.tag {
				width: 8px;
				height: 8px;
				background-color: #1890ff;
				border-radius: 100%;
				margin-right: 10px;
			}
			.price {
				font-size: 14px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #1890ff;
				line-height: 20px;
				margin-left: 20px;
			}
		}
	}
	::v-deep .el-input-number {
		width: 100%;
		.el-input-number__decrease,
		.el-input-number__increase {
			display: none;
		}
		input {
			width: 100%;
			padding: 5px;
			text-align: left;
		}
	}
	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 48px;
		background: #ffffff;
		border-radius: 4px;
		border: 1px solid #dadada;
		color: #1890ff;
		margin-top: 15px;
		font-size: 14px;
		cursor: pointer;
	}
</style>
